<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="orderSearch">
      <el-form ref="form" :model="chazhaodingdanForm" label-width="80px" inline>
        <el-form-item>
          <el-input v-model="chazhaodingdanForm.order_num" placeholder="请输入订单编号" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="chazhaodingdanForm.student_id" placeholder="选择学生">
            <el-option v-for="item in stuShuzu" :key="item.unid" :label="item.student_name" :value="item.unid" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getOrderTableByid()">查询</el-button>
          <el-button type="info" @click="chongzhiForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 金额显示区域 -->
    <div class="moneyShow">
      <div class="moneyShowDIv1 masdasd">
        <div class="moneyShowDIv1INY">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xingzhuanggongnengtubiao-1" />
            </svg>
          </div>
          <div class="dingdanzongeasda">
            <div>订单总额：</div>
            <div class="dingdanzongeasdaa">{{ orderTongji.total_price }}</div>
          </div>
        </div>
      </div>
      <div class="moneyShowDIv1">
        <div class="moneyShowDIv1INY">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dingdanxiangqing-dingdanzhuangtai" />
            </svg>
          </div>
          <div class="dingdanzongeasda">
            <div>已缴费金额：</div>
            <div class="dingdanzongeasdaa">{{ orderTongji.pay_price }}</div>
          </div>
        </div>
      </div>
      <div class="moneyShowDIv1">
        <div class="moneyShowDIv1INY">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-tubiaozhizuomoban" />
            </svg>
          </div>
          <div class="dingdanzongeasda">
            <div>待缴费总金额：</div>
            <div class="dingdanzongeasdaa">{{ orderTongji.no_fees }}</div>
          </div>
        </div>
      </div>
      <div class="moneyShowDIv1">
        <div class="moneyShowDIv1INY">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xingzhuanggongnengtubiao-1" />
            </svg>
          </div>
          <div class="dingdanzongeasda">
            <div>新增订单总额：</div>
            <div class="dingdanzongeasdaa">9999</div>
          </div>
        </div>
      </div>
      <div class="moneyShowDIv1">
        <div class="moneyShowDIv1INY">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-youhuiquan" />
            </svg>
          </div>
          <div class="dingdanzongeasda">
            <div>优惠总额：</div>
            <div class="dingdanzongeasdaa">{{ orderTongji.discount_price }}</div>

          </div>
        </div>
      </div>
      <div class="moneyShowDIv1">
        <div class="moneyShowDIv1INY">
          <div>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-task" />
            </svg>
          </div>
          <div class="dingdanzongeasda">
            <div>任务目标差额：</div>
            <div class="dingdanzongeasdaa">9999</div>
          </div>
        </div>
      </div>
    </div>

    <div class="xuanzexianshi">
      <el-link
        :type="showPage === 1 ? 'primary' : ''"
        @click="showPage = 1"
      >订单</el-link>
      <div>
        <el-link
          :type="showPage === 3 ? 'primary' : ''"
          @click="showPage = 3"
        >待付款订单</el-link>
      </div>
      <div>
        <el-link
          :type="showPage === 2 ? 'primary' : ''"
          @click="showPage = 2"
        >已作废</el-link>
      </div>
    </div>

    <!-- 订单 -->
    <div v-if="showPage === 1">
      <div class="xjsfBtn">
        <el-button
          type="success"
          @click="dialogVisible = true"
        >新建订单</el-button>
      </div>
      <!-- 表格区域 -->
      <el-table border size="mini" fit highlight-current-row :data="orderTable">
        <el-table-column align="center" label="序号" type="index" width="80" />
        <el-table-column align="center" label="订单编号" prop="order_num" />
        <el-table-column align="center" label="缴费类型" width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type === 1" type="primary" effect="dark">
              报名交易
            </el-tag>
            <el-tag
              v-else-if="scope.row.type === 2"
              type="success"
              effect="dark"
            >
              补交交易
            </el-tag>
            <el-tag v-else type="warning" effect="dark"> 代付款 </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="学生ID"
          width="150"
          prop="student_id"
        />
        <el-table-column align="center" label="单价" width="100" prop="price" />
        <el-table-column
          align="center"
          label="优惠金额"
          prop="discount_price"
        />
        <el-table-column align="center" label="机构ID" prop="institution_id" />
        <el-table-column
          align="center"
          label="总价"
          width="120"
          prop="total_price"
        />
        <el-table-column align="center" label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="getOrderInfo(scope.row.unid)"
            >查看</el-button>
            <el-button
              size="small"
              type="danger"
              icon="el-icon-delete"
              @click="deleteOrder(scope.row.unid)"
            >作废</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 页码区域 -->
      <!-- 页码切换 -->
      <div class="bottomPaginationaa">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[6, 10, 15]"
          :page-size="orderInfo.limit"
          layout=" sizes, prev, pager, next,total, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 代付款订单 -->
    <div v-if="showPage === 3">
      <div class="xjsfBtn">
        <el-button
          type="success"
          @click="dialogVisible = true"
        >新建订单</el-button>
      </div>
      <!-- 表格区域 -->
      <el-table
        border
        size="mini"
        fit
        highlight-current-row
        :data="orderTable2"
      >
        <el-table-column align="center" label="序号" type="index" width="80" />
        <el-table-column align="center" label="订单编号" prop="order_num" />
        <el-table-column align="center" label="缴费类型" width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type === 1" type="primary" effect="dark">
              报名交易
            </el-tag>
            <el-tag
              v-else-if="scope.row.type === 2"
              type="success"
              effect="dark"
            >
              补交交易
            </el-tag>
            <el-tag v-else type="warning" effect="dark"> 代付款 </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="学生ID"
          width="150"
          prop="student_id"
        />
        <el-table-column align="center" label="单价" width="100" prop="price" />
        <el-table-column
          align="center"
          label="优惠金额"
          prop="discount_price"
        />
        <el-table-column align="center" label="机构ID" prop="institution_id" />
        <el-table-column
          align="center"
          label="总价"
          width="120"
          prop="total_price"
        />
        <el-table-column align="center" label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="getOrderInfo(scope.row.unid)"
            >查看</el-button>
            <el-button
              size="small"
              type="danger"
              icon="el-icon-delete"
              @click="deleteOrder(scope.row.unid)"
            >作废</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 页码区域 -->
      <!-- 页码切换 -->
      <div class="bottomPaginationaa">
        <el-pagination
          :current-page="currentPage2"
          :page-sizes="[6, 10, 15]"
          :page-size="orderInfo2.limit"
          layout=" sizes, prev, pager, next,total, jumper"
          :total="total2"
          @size-change="handleSizeChange2"
          @current-change="handleCurrentChange2"
        />
      </div>
    </div>
    <!-- 作废订单 -->
    <div v-if="showPage === 2">
      <div class="tableOrder">
        <el-table
          border
          size="mini"
          fit
          highlight-current-row
          :data="orderTable1"
        >
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="80"
          />
          <el-table-column align="center" label="订单编号" prop="order_num" />
          <el-table-column align="center" label="缴费类型" width="120">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.type === 1" type="primary" effect="dark">
                报名交易
              </el-tag>
              <el-tag
                v-else-if="scope.row.type === 2"
                type="success"
                effect="dark"
              >
                补交交易
              </el-tag>
              <el-tag v-else type="warning" effect="dark"> 代付款 </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="学生ID"
            width="150"
            prop="student_id"
          />
          <el-table-column
            align="center"
            label="单价"
            width="100"
            prop="price"
          />
          <el-table-column
            align="center"
            label="优惠金额"
            prop="discount_price"
          />
          <el-table-column
            align="center"
            label="机构ID"
            prop="institution_id"
          />
          <el-table-column
            align="center"
            label="总价"
            width="120"
            prop="total_price"
          />
          <el-table-column align="center" label="操作" width="300">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="getOrderInfo(scope.row.unid)"
              >查看</el-button>
              <el-button
                size="small"
                type="danger"
                icon="el-icon-delete"
                @click="deleteOrder(scope.row.unid)"
              >作废</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 页码区域 -->
      <!-- 页码切换 -->
      <div class="bottomPaginationaa">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[6, 10, 15]"
          :page-size="orderInfo1.limit"
          layout=" sizes, prev, pager, next,total, jumper"
          :total="total1"
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
        />
      </div>
    </div>

    <!-- 查看订单DIALOG -->
    <el-dialog title="提示" :visible.sync="lookOrderInfoDialog" width="60%">
      <div class="lookOrderDiaLogDiv">
        <div class="lookOrderDiaLogDivDiv1">
          <h2>订单信息</h2>
        </div>
        <div class="lookOrderDiaLogDiv1123">
          <div class="lookOrderDiaLogDiv1">
            <div>订单编号：{{ dqhorder.order_num }}</div>
            <div>
              缴费类型：
              <span v-if="dqhorder.type === 1"> 订金 </span>
              <span v-if="dqhorder.type === 2"> 学费 </span>
            </div>
          </div>
          <div class="lookOrderDiaLogDiv2">
            <div class="column">
              <span>姓名：<span v-if="dqhorder">{{
                dqhorder.student.student_name
              }}</span></span>
              <span>手机号：178456123</span>
            </div>
            <div class="column">
              <span>日期：{{ dqhorder.create_time }}</span>
              <span>跟进人：无</span>
            </div>
          </div>
        </div>
      </div>

      <div class="goodsInfo1234">
        <div class="goodsInfo1234H2">商品信息</div>
        <div class="goodsInfoTableData11778">
          <el-table border :data="dqhorder.order_pay" style="width: 100%">
            <el-table-column
              prop="pay_lession.lession.lession_name"
              label="商品名称"
            />
            <el-table-column width="120" prop="pay_num" label="购买数量" />
            <el-table-column width="120" prop="pay_lession.price" label="单价" />
            <el-table-column width="120" prop="pay_lession.price" label="总价" />
            <el-table-column width="120" prop="pay_lession.price" label="实付金额" />
          </el-table>
        </div>
      </div>

      <div class="goodsInfo1234">
        <div class="goodsInfo1234H2">支付信息</div>
        <div class="goodsInfoTableData11778">
          <el-table border style="width: 100%">
            <el-table-column prop="date" label="收款人" />
            <el-table-column prop="name" label="缴款日期" width="100" />
            <el-table-column width="150" prop="buyNum" label="缴费金额" />
            <el-table-column width="150" label="缴费方式" />
            <el-table-column label="交易编号" />
            <el-table-column width="150" label="欠款金额" />
          </el-table>
        </div>
      </div>

      <span slot="footer" class="dialog-footer" />
    </el-dialog>

    <!-- 收费Dialog  -->
    <el-dialog title="新建收费订单" :visible.sync="dialogVisible" width="60%">
      <div>
        <el-steps :active="0" align-center>
          <el-step title="选择收费项目" process-status="process" />
          <el-step title="选择学生" process-status="wait" />
          <el-step title="确认交易" process-status="wait" />
        </el-steps>
      </div>
      <div class="shoufeiDialogForm">
        <el-form
          ref="cxkcialogRef"
          :model="seachCOurseFOrmDIa"
          label-width="80px"
          inline
        >
          <el-form-item prop="semester_id">
            <el-select
              v-model="seachCOurseFOrmDIa.semester_id"
              clearable
              placeholder="学期"
            >
              <el-option
                v-for="item in shoufeiCourse"
                :key="item.unid"
                :label="item.semester.semester_name"
                :value="item.semester.unid"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="lession_id">
            <el-select
              v-model="seachCOurseFOrmDIa.lession_id"
              clearable
              placeholder="课程"
            >
              <el-option
                v-for="item in shoufeiCourse"
                :key="item.unid"
                :label="item.lession.lession_name"
                :value="item.lession.unid"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="getShoufeiKecheng2()"
            >查询</el-button>
            <el-button type="info" @click="clearForm163()">重置</el-button>
            <el-button type="danger" @click="clearGouwuche()">清空购物车</el-button>
          </el-form-item>

        </el-form>
      </div>
      <el-tabs type="border-card" class="cardTags">
        <el-tab-pane label="课程类">
          <div class="shouFeiTable">
            <el-table
              border
              fit
              highlight-current-row
              height="300px"
              :data="shoufeiCourse"
            >
              <el-table-column align="center" label="收费编号" prop="pay_num" />
              <el-table-column
                align="center"
                label="项目"
                prop="lession.lession_name"
              />
              <el-table-column align="center" label="课时" prop="lession_time" />
              <el-table-column align="center" label="价格" prop="price" />
              <el-table-column align="center" label="机构ID" prop="createor_id" />
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="small"
                    type="primary"
                    @click="jiashoufeikecheng(scope.row,1)"
                  >加入购物车</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="教辅类">
          <div class="shouFeiTable">
            <el-table
              border
              fit
              highlight-current-row
              height="300px"
              :data="otherPayItemJIAOCAI"
            >
              <el-table-column align="center" label="项目名称" prop="item_name" />
              <el-table-column
                align="center"
                label="类别id"
                prop="cate_id"
              />
              <el-table-column align="center" label="教材id" prop="lession_time" />
              <el-table-column align="center" label="价格" prop="textbook_id" />
              <el-table-column align="center" label="单价" prop="price" />
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="small"
                    type="primary"
                    @click="jiashoufeikecheng(scope.row,2)"
                  >加入购物车</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div></el-tab-pane>
        <el-tab-pane label="杂费类">
          <div class="shouFeiTable">
            <el-table
              border
              fit
              highlight-current-row
              height="300px"
              :data="otherPayItemYHQ"
            >
              <el-table-column align="center" label="项目名称" prop="item_name" />
              <el-table-column
                align="center"
                label="类别id"
                prop="cate_id"
              />
              <el-table-column align="center" label="教材id" prop="lession_time" />
              <el-table-column align="center" label="价格" prop="textbook_id" />
              <el-table-column align="center" label="单价" prop="price" />
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="small"
                    type="primary"
                    @click="jiashoufeikecheng(scope.row,2)"
                  >加入购物车</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>

      <div class="itemInfo">
        <div>
          <div
            v-if="jiarugouwucheShuzu.length!==0"
            class="msShow"
          >
            <span>{{ jiarugouwucheShuzu[0].lession.lession_name }}</span>
            <span>课时：{{ jiarugouwucheShuzu[0].lession_time }}(小时)</span>
            <span>开课时间：{{ jiarugouwucheShuzu[0].semester.start_time }}</span>
            <span>结课时间： {{ jiarugouwucheShuzu[0].semester.end_time }}</span>
            <span>价格：{{ jiarugouwucheShuzu[0].price }}(元)</span>
          </div>
          <div
            v-if="jiarugouwucheShuzu[1]"
            class="msShow"
          >
            <span>{{ jiarugouwucheShuzu[1].lession.lession_name }}</span>
            <span>课时：{{ jiarugouwucheShuzu[1].lession_time }}(小时)</span>
            <span>开课时间：{{ jiarugouwucheShuzu[1].semester.start_time }}</span>
            <span>结课时间： {{ jiarugouwucheShuzu[1].semester.end_time }}</span>
            <span>价格：{{ jiarugouwucheShuzu[1].price }}(元)</span>
          </div>
          <div
            v-if="jiarugouwucheShuzu[2]"
            class="msShow"
          >
            <span>{{ jiarugouwucheShuzu[2].lession.lession_name }}</span>
            <span>课时：{{ jiarugouwucheShuzu[2].lession_time }}(小时)</span>
            <span>开课时间：{{ jiarugouwucheShuzu[2].semester.start_time }}</span>
            <span>结课时间： {{ jiarugouwucheShuzu[2].semester.end_time }}</span>
            <span>价格：{{ jiarugouwucheShuzu[2].price }}(元)</span>
          </div>
          <div
            v-if="jiaocaizaifei.length!==0"
            class="msShow"
          >
            <span>{{ jiaocaizaifei[0].item_name }}</span>
            <span>价格：{{ jiaocaizaifei[0].price }}(元)</span>
          </div>
          <div
            v-if="jiaocaizaifei[1]"
            class="msShow"
          >
            <span>{{ jiaocaizaifei[1].item_name }}</span>
            <span>价格：{{ jiaocaizaifei[1].price }}(元)</span>
          </div>
          <div
            v-if="jiaocaizaifei[2]"
            class="msShow"
          >
            <span>{{ jiaocaizaifei[2].item_name }}</span>
            <span>价格：{{ jiaocaizaifei[2].price }}(元)</span>
          </div>

        </div>
        <div class="svgDiv">
          <div v-if="jiarugouwucheShuzu.length === 0&&jiaocaizaifei.length===0">
            <span>0</span>
          </div>
          <div v-else>
            <span>{{ jiarugouwucheShuzu.length + jiaocaizaifei.length }}</span>
          </div>
          <div class="svgDIv">
            <svg class="icon" aria-hidden="true">
              1
              <use xlink:href="#icon-gouwuche" />
              1
            </svg>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="clicktoStu">下一步</el-button>
      </span>
    </el-dialog>

    <!-- 选择学生dialog -->
    <el-dialog
      title="新建收费订单-选择学生"
      :visible.sync="selectStuDialogVisible"
      width="60%"
    >
      <div>
        <el-steps :active="1" align-center>
          <el-step title="选择收费项目" process-status="wait" />
          <el-step title="选择学生" process-status="process" />
          <el-step title="确认交易" process-status="wait" />
        </el-steps>
      </div>

      <div class="shangpingouwuche">
        <div class="shangpingouwucheqqq">
          <div><h4>商品购物车</h4></div>
          <div
            v-if="jiarugouwucheShuzu.length!==0"
            class="msShow"
          >
            <span>{{ jiarugouwucheShuzu[0].lession.lession_name }}</span>
            <span>课时：{{ jiarugouwucheShuzu[0].lession_time }}(小时)</span>
            <span>开课时间：{{ jiarugouwucheShuzu[0].semester.start_time }}</span>
            <span>结课时间： {{ jiarugouwucheShuzu[0].semester.end_time }}</span>
            <span>价格：{{ jiarugouwucheShuzu[0].price }}(元)</span>
          </div>
          <div
            v-if="jiarugouwucheShuzu[1]"
            class="msShow"
          >
            <span>{{ jiarugouwucheShuzu[1].lession.lession_name }}</span>
            <span>课时：{{ jiarugouwucheShuzu[1].lession_time }}(小时)</span>
            <span>开课时间：{{ jiarugouwucheShuzu[1].semester.start_time }}</span>
            <span>结课时间： {{ jiarugouwucheShuzu[1].semester.end_time }}</span>
            <span>价格：{{ jiarugouwucheShuzu[1].price }}(元)</span>
          </div>
          <div
            v-if="jiarugouwucheShuzu[2]"
            class="msShow"
          >
            <span>{{ jiarugouwucheShuzu[2].lession.lession_name }}</span>
            <span>课时：{{ jiarugouwucheShuzu[2].lession_time }}(小时)</span>
            <span>开课时间：{{ jiarugouwucheShuzu[2].semester.start_time }}</span>
            <span>结课时间： {{ jiarugouwucheShuzu[2].semester.end_time }}</span>
            <span>价格：{{ jiarugouwucheShuzu[2].price }}(元)</span>
          </div>
          <div
            v-if="jiaocaizaifei.length!==0"
            class="msShow"
          >
            <span>{{ jiaocaizaifei[0].item_name }}</span>
            <span>价格：{{ jiaocaizaifei[0].price }}(元)</span>
          </div>
          <div
            v-if="jiaocaizaifei[1]"
            class="msShow"
          >
            <span>{{ jiaocaizaifei[1].item_name }}</span>
            <span>价格：{{ jiaocaizaifei[1].price }}(元)</span>
          </div>
          <div
            v-if="jiaocaizaifei[2]"
            class="msShow"
          >
            <span>{{ jiaocaizaifei[2].item_name }}</span>
            <span>价格：{{ jiaocaizaifei[2].price }}(元)</span>
          </div>

        </div>
      </div>
      <!-- 学员列表 -->
      <div class="xueyuanliebiaoBtn">
        <el-button
          type="primary"
          size="medium"
          @click="isStuShow = 1"
        >学员列表</el-button>
        <el-button
          type="success"
          size="medium"
          @click="isStuShow = 2"
        >新建学员</el-button>
      </div>
      <div v-if="isStuShow === 1">
        <!-- 学员列表搜索区域 -->
        <div class="StuSearch">
          <el-form ref="form" :model="stuSearInfo" label-width="80px" inline>
            <el-form-item>
              <el-input
                v-model="stuSearInfo.student_name"
                placeholder="请输入学生姓名"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getStuIofo(2)">查询</el-button>
              <el-button type="danger" @click="getStuIofo()">重置</el-button>

            </el-form-item>
            <el-form-item s>
              <el-select v-model="orderForm.type" placeholder="选择交易类型">
                <el-option label="报名交易" value="1" />
                <el-option label="补交交易" value="2" />
                <el-option label="代付款" value="3" />
              </el-select>
            </el-form-item>

          </el-form>
        </div>

        <!-- 学员列表表格 -->
        <div class="shouFeiTable">
          <el-table
            border
            fit
            size="medium"
            highlight-current-row
            :data="stuShuzu"
          >
            <el-table-column
              align="center"
              label="学生姓名"
              prop="student_name"
            />

            <el-table-column
              align="center"
              label="性别"
            >
              <template slot-scope="scope">
                <el-tag v-if="scope.row.sex===1" type="success" effect="dark">男</el-tag>
                <el-tag v-else>女</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="家长名字"
              prop="home[0].parent_name"
            />
            <el-table-column
              align="center"
              label="联系方式"
              width="150"
              prop="home[0].phone"
            />
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="success"
                  @click="addStuTOForm(scope.row)"
                >加入</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 页码切换 -->
          <div class="bottomPaginationaa">
            <el-pagination
              :current-page="currentPagestu"
              :page-sizes="[6, 10, 20]"
              :page-size="stuSearInfo.limit"
              layout=" sizes, prev, pager, next,total, jumper"
              :total="totalStu"
              @size-change="handleSizeChangestu"
              @current-change="handleCurrentChangestu"
            />
          </div>
        </div>
      </div>
      <div v-if="isStuShow === 2">
        <div class="addStuDIV">
          <div class="divTitle"><h3>基本信息</h3></div>
          <el-form
            ref="addStuOrderFormRef"
            :model="addStuOrderForm"
            inline
            :rules="addStuOrderFormRules"
            class="formStu"
          >
            <el-form-item label="学员姓名" prop="student_name" class="formItem">
              <el-input v-model="addStuOrderForm.student_name" />
            </el-form-item>
            <el-form-item label="性别" prop="sex" class="formItem">
              <el-select v-model="addStuOrderForm.sex" class="selectClass">
                <el-option label="男" value="1" />
                <el-option label="女" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="联系地址" class="formItem">
              <el-input v-model="addStuOrderForm.address" />
            </el-form-item>
          </el-form>
          <div class="divTitle"><h3>家庭信息</h3></div>
          <el-form
            :model="addStuHomeForm"
            inline
            :rules="addStuHomeFormRules"
            class="formStu"
          >
            <el-form-item label="家长姓名" prop="parent_name" class="formItem">
              <el-input v-model="addStuHomeForm.parent_name" />
            </el-form-item>
            <el-form-item label="称谓" prop="relation" class="formItem">
              <el-select v-model="addStuOrderForm.relation" class="selectClass">
                <el-option label="爸爸" value="1" />
                <el-option label="妈妈" value="2" />
                <el-option label="爷爷" value="3" />
                <el-option label="奶奶" value="4" />
              </el-select>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone" class="formItem">
              <el-input v-model="addStuHomeForm.phone" />
            </el-form-item>
          </el-form>

        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button v-if="isStuShow===2" type="success" @click="xinjianStu()">新建</el-button>
        <el-button @click="selectStuDialogVisible = false">重置</el-button>
        <el-button type="primary" @click="checkSelectStu()">下一步</el-button>
      </span>
    </el-dialog>

    <!-- 订单确认DIALOG  -->
    <el-dialog
      title="新建收费订单"
      :visible.sync="makeSureDealDialog"
      width="60%"
    >
      <el-steps :active="2" align-center>
        <el-step title="选择收费项目" process-status="process" />
        <el-step title="选择学生" process-status="wait" />
        <el-step title="确认交易" process-status="wait" />
      </el-steps>
      <div v-if="asd === 2">
        <el-form label-position="left" label-width="100px">
          <div class="elFormDIV1">
            <!-- <div class="elFormDIV2">
              <div class="elFormDIv3">
                <el-form-item label="订单编号:">
                  {{ orderForm.order_num }}
                </el-form-item>
                <el-form-item label="姓名:">
                  {{ stuForm.student_name }}
                </el-form-item>
              </div>
              <div class="elFormDIv4">
                <el-form-item label="联系方式:">
                  {{ stuForm.home[0].phone }} ({{
                    stuForm.home[0].parent_name
                  }})
                </el-form-item>
                <el-form-item label="创建日期:">
                  {{ getNowTime }}
                </el-form-item>
              </div>
            </div> -->
          </div>
          <div class="elFormDIV1">
            <div class="elFormDIV2">
              <div class="elFormDIv3">
                <!-- <div>
                  <el-form-item label="在读学期:">
                    {{ sfcourseForm.semester.semester_name }}
                  </el-form-item>
                  <el-form-item label="在读年级:">
                    {{ stuForm.recruit.grade }}
                  </el-form-item>
                  <el-form-item label="在读课程:">
                    {{ sfcourseForm.lession.lession_name }}
                  </el-form-item>
                </div> -->
              </div>
              <div class="elFormDIv4">
                <el-form-item label="所属校区:">
                  <span>智助教育培训中心 珠海校区</span>
                </el-form-item>
                <el-form-item label="上课教室:">
                  1栋2009室（后台未返回）
                </el-form-item>
                <el-form-item label="校区电话:"> 0756-88888888 </el-form-item>
              </div>
            </div>
          </div>
          <div class="elFormDIV6">
            <div class="elFormDIV2">
              <div class="elFormDIv3">
                <el-form-item label="购买内容">
                  <!-- <div>
                    {{ sfcourseForm.lession.lession_name }}
                    {{ sfcourseForm.price }}元
                  </div> -->
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="makeSureDealDialog = false">重置</el-button>
        <el-button
          type="primary"
          @click="
            addOrder();
            makeSureDealDialog = false;
          "
        >确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 将这两行代码复制到需要使用icon font的组件下面
import '@/assets/iconfont/iconfont.js'
import '@/assets/iconfont/iconfont.css'
import {
    getStu,
    getShoufeiCourse,
    submitOrder,
    getOrder,
    deleteOrderApi,
    getOrderInfoAPI,
    // getCOurseMustAPI,
    addStu,
    getOtherPayAPI,
    gettongjiApi
} from '@/api/order'
export default {
    data() {
        // 手机验证规则
        var checkPhone = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('手机号不能为空'))
            } else {
                const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                console.log(reg.test(value))
                if (reg.test(value)) {
                    callback()
                } else {
                    return callback(new Error('请输入正确的手机号'))
                }
            }
        }
        return {

            chazhaodingdanForm: {},
            xuyaozhifujineshuzu: [],
            zongjineshuzu: [],
            youhuijineshuzu: [],
            addStuOrderForm: {
                student_name: '',
                sex: '',
                address: '',
                home: []
            },
            addStuHomeForm: {
                parent_name: '',
                relation: '',
                phone: ''
            },
            isStuShow: 1,
            showPage: 1,
            dqhorder: {
                student: {
                    student_name: ''
                },
                order_pay: [
                    {
                        create_time: '',
                        order_id: '',
                        pay_num: '',
                        pay_lession: {
                            price: '',
                            pay_num: '',
                            type: '',
                            lession: {
                                lession_name: ''
                            }
                        }
                    }
                ]
            },
            asd: 1,
            stuForm: {},
            sfcourseForm: {},
            seachCOurseFOrmDIa: {
                semester_id: '',
                lession_id: ''
            },
            value1: '',
            // 总金额数组
            getSuzuPriceSuzu: [],
            getSuzuPriceSuzu2: [],
            // 优惠金额数组
            getSuzuPriceSuzu3: [],
            payITEM: {
                pay_id: '',
                pay_num: '1',
                type: ''
            },
            courseMust: [],
            addPayitemDIALOG: false,
            orderTable: [],
            orderTable1: [],
            orderTable2: [],
            currentPage: 1,
            currentPage1: 1,
            currentPage2: 1,
            currentPagestu: 1,
            total: 6,
            total1: 6,
            total2: 6,
            totalStu: 6,
            orderInfo: {
                is_delete: 0,
                limit: 6,
                page: 1
            },
            orderInfo1: {
                is_delete: 1,
                limit: 6,
                page: 1
            },
            orderInfo2: {
                is_delete: 0,
                limit: 6,
                page: 1,
                type: 3
            },
            addOrderDIALOG: false,
            orderForm: {
                order_num: '',
                student_id: '',
                price: null,
                total_price: null,
                discount_price: 1,
                pay_item: [],
                type: null
            },
            gwcObj: {
                pay_id: '',
                pay_num: '1',
                type: null
            },
            jiarugouwucheShuzu: [
            ],
            jiaocaizaifei: [
            ],
            shoufeiCourse: [
                {
                    price: '',
                    lession: {
                        lession_name: '',
                        grade: ''
                    },
                    semester: {
                        semester_name: '',
                        timetable_id: ''
                    }
                }
            ],
            otherPayItemYHQ: [],

            orderTongji: [],
            otherPayItemJIAOCAI: [],
            stuShuzu: [
                {
                    home: [
                        {
                            phone: '',
                            parent_name: ''

                        }
                    ]
                }
            ],
            addPayitemForm: {
                pay_id: '',
                pay_num: '1',
                type: ''
            },
            addStuHomeFormRules: {
                parent_name: [
                    {
                        required: false,
                        message: '请输入家长姓名',
                        trigger: 'blur'
                    }
                ],
                relation: [
                    {
                        required: false,
                        message: '请输入家长称谓',
                        trigger: 'blur'
                    }
                ],
                phone: [
                    { required: false, validator: checkPhone, message: '请输入正确的手机格式', trigger: ['blur', 'change'] }

                ]
            },
            addStuOrderFormRules: {
                student_name: [
                    {
                        required: true,
                        message: '请输入学员姓名',
                        trigger: 'blur'
                    }
                ],
                sex: [
                    {
                        required: true,
                        message: '请输入性别',
                        trigger: 'blur'
                    }
                ],
                address: [
                    {
                        required: false,
                        message: '请输入性别',
                        trigger: 'blur'
                    }
                ]
            },
            stuSearInfo: {
                student_name: '',
                page: 1,
                limit: 4
            },

            makeSureDealDialog: false,
            createStuInfoDialog: false,
            selectStuDialogVisible: false,
            dialogVisible: false,
            value2: '',
            lookOrderInfoDialog: false

        }
    },
    computed: {

        xuyaozhifujine: function() {
            return parseInt(Math.random() * 1000000)
        },

        youhuijine: function() {
            return parseInt(Math.random() * 1000000)
        },

        zongjine: function() {
            return this.zongjineshuzu.reduce((pre, item) => {
                return pre + item
            }, 0)
        },

        orderNumRandom: function() {
            return parseInt(Math.random() * 1000000)
        },
        totalPrice: function() {
            return this.getSuzuPrice(
                this.getSuzuPriceSuzu2,
                this.getSuzuPriceSuzu
            )
        },
        totalDiscountPrice: function() {
            return this.getDiscountPrice(
                this.getSuzuPriceSuzu2,
                this.getSuzuPriceSuzu3
            )
        },
        gwcPrice: function() {
            return this.getSuzuPrice(
                this.jiarugouwucheShuzu,
                this.getSuzuPriceSuzu
            )
        },
        getNowTime: function() {
            return (
                new Date().toLocaleDateString() +
                new Date().toLocaleTimeString()
            )
                .split('上午')
                .join()
        }
        // stuPhone1: function() {
        //     return this.stuForm.home.phone
        // }
    },
    created() {
        this.getStuIofo()
        this.getShoufeiKecheng()
        this.getOrderTable()
        this.getOrderTable1()
        this.getOrderTable2()
        this.getOrderTable3()
        // this.getCOurseMust()
        this.getOtherPayYHQ()
        this.getOtherPayJIAOCAI()
        this.getTOngji()
    },

    methods: {
        // 正式学员处理分页切换
        handleSizeChangestu(val) {
            this.stuSearInfo.limit = val
            this.getStuIofo()
        },
        handleCurrentChangestu(val) {
            this.stuSearInfo.page = val
            this.getStuIofo()
        },
        changsasd() {
            console.log('change')
        },
        clearGouwuche() {
            this.jiarugouwucheShuzu.splice(0)
        },
        // 优惠券查询
        async   getOtherPayYHQ() {
            let qqq = {
                cate_id: '5ff2ecd869c92'
            }
            const rs = await getOtherPayAPI(qqq)
            console.log('优惠券')
            console.log(rs.data.list)
            this.otherPayItemYHQ = rs.data.list
        },
        // 教材查询
        async   getOtherPayJIAOCAI() {
            let qqq = {
                cate_id: '5ff2ecbf82f31'
            }
            const rs = await getOtherPayAPI(qqq)
            console.log('其他收费')
            console.log(rs.data.list)
            this.otherPayItemJIAOCAI = rs.data.list
        },
        // 订单统计
        async   getTOngji() {
            let qqq = {

            }
            const rs = await gettongjiApi(qqq)
            console.log('订单统计')
            console.log(rs.data)
            this.orderTongji = rs.data
            // this.otherPayItemJIAOCAI = rs.data.list
        },

        xinjianStu() {
            this.addStuOrderForm.home.push(this.addStuHomeForm)
            this.$confirm('将添加该学员以及家庭成员信息，是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$refs.addStuOrderFormRef.validate(async valid => {
                    if (!valid) return
                    else {
                        let rs = await addStu(this.addStuOrderForm)
                        if (rs.code !== 200) return
                        else {
                            this.$message.success('新建学员成功')
                            this.isStuShow = 1
                        }
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                })
            })
        },
        checkSelectStu() {
            if (JSON.stringify(this.stuForm) === '{}') {
                return this.$message.error('请选择学生')
            }
            if (this.orderForm.type === null) {
                return this.$message.error('请选择交易类型')
            } else {
                this.orderForm.order_num = this.orderNumRandom
                this.orderForm.total_price = this.zongjine
                this.orderForm.price = parseInt(this.zongjine) - parseInt(this.orderForm.discount_price)
                this.selectStuDialogVisible = false
                this.makeSureDealDialog = true
            }
        },
        addStuTOForm(row) {
            console.log('----row----')
            console.log(row)
            if (this.orderForm.student_id) { return this.$message.error('一次只能选择一名学员') }
            this.orderForm.student_id = row.unid
            this.stuForm = row
            console.log('----stuFORM----')

            console.log(this.stuForm)
            this.asd = 2
            this.$message.success(`已添加学生${row.student_name}`)
        },

        getCOurseMust() {
            console.log('getCOusMust')
        },
        // 计算订单总金额
        getSuzuPrice(sz, total) {
            for (var i = 0; i < sz.length; i++) {
                total.push(sz[i].total_price)
            }
            return total.reduce(function(pre, cur) {
                return pre + cur
            }, 0)
        },
        // 计算订单总金额
        getDiscountPrice(sz, total) {
            for (var i = 0; i < sz.length; i++) {
                total.push(sz[i].discount_price)
            }
            return total.reduce(function(pre, cur) {
                return pre + cur
            }, 0)
        },
        async getOrderInfo(unid) {
            let query = {
                unid: ''
            }
            query.unid = unid
            var resData = await getOrderInfoAPI(query)
            if (resData.code !== 200) return
            else {
                console.log('当前行订单')
                console.log(resData.data)
                this.dqhorder = resData.data
                this.lookOrderInfoDialog = true
            }
        },
        handleSizeChange(val) {
            this.orderInfo.limit = val
            this.getOrderTable()
        },
        handleCurrentChange(val) {
            this.orderInfo.page = val
            this.getOrderTable()
        },
        handleSizeChange1(val) {
            this.orderInfo1.limit = val
            this.getOrderTable1()
        },
        handleCurrentChange1(val) {
            this.orderInfo1.page = val
            this.getOrderTable1()
        },
        handleSizeChange2(val) {
            this.orderInfo2.limit = val
            this.getOrderTable3()
        },
        handleCurrentChange2(val) {
            this.orderInfo2.page = val
            this.getOrderTable3()
        },

        setSTHIntoForm() {
            if (this.jiarugouwucheShuzu.length > 0) {
                this.orderForm.type = 1
                this.orderForm.pay_item.push(this.gwcObj)
                console.log('赋值后选择订单')
                console.log(this.orderForm)
            } else console.log('数组为空')
        },
        // 将收费课程加入购物车
        async jiashoufeikecheng(a, b) {
            console.log(a)
            // console.log('----------gouwuche')
            // console.log(a)

            // this.$set(this.orderForm, 'order_num', this.orderNumRandom)
            // console.log(this.orderForm)
            // if (this.jiarugouwucheShuzu.length === 1) {
            //     return this.$message.error('一次只能添加一个')
            // }
            if (b === 1) {
                this.jiarugouwucheShuzu.push(JSON.parse(JSON.stringify(a)))
                console.log('收费课程')
                console.log(a)
                this.zongjineshuzu.push(a.price)
                this.gwcObj.pay_id = a.unid
                this.gwcObj.type = 1
                this.orderForm.pay_item.push(JSON.parse(JSON.stringify(this.gwcObj)))
            } else {
                this.jiaocaizaifei.push(JSON.parse(JSON.stringify(a)))
                console.log('教材优惠券')
                console.log(a)
                // this.zongjineshuzu.push(a.price)
                this.gwcObj.pay_id = a.unid
                this.gwcObj.type = 2
                this.orderForm.pay_item.push(JSON.parse(JSON.stringify(this.gwcObj)))
            }

            // this.jiarugouwucheShuzu.push(JSON.parse(JSON.stringify(a)))
            // this.sfcourseForm = a
            // this.orderForm.price = a.price
            // this.orderForm.total_price = a.price
            // this.gwcObj.pay_id = a.unid
            // this.orderForm.type = a.type

        // 查询课程下是否含有必须购买的项目
        // let qqq = {
        //     unid: ''
        // }
        // qqq.unid = a.unid
        // let rs = await getCOurseMustAPI(qqq)
        // if (rs.data.length < 1) {
        //     console.log('无必须购买项目')
        // } else {
        //     this.courseMust = rs.data
        // }
        },

        async deleteOrder(unid) {
            this.$confirm('此操作将删除该课程，是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async() => {
                    let query = {
                        unid: ''
                    }
                    query.unid = unid
                    var resData = await deleteOrderApi(query)
                    if (resData.code !== 200) return
                    else {
                        this.$message.success('删除订单成功')
                        this.getOrderTable()
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        chongzhiForm() {
            this.chazhaodingdanForm = {}
            this.getOrderTable()
        },
        async getOrderTableByid() {
            var rs = await getOrder(this.chazhaodingdanForm)
            if (rs.code !== 200) return
            else {
                this.showPage = 1
                console.log(rs.data)
                this.orderTable = rs.data.list
            }
        // if (resData.code !== 200) return
        // console.log('非回收站订单信息')
        // console.log(resData.data.list)
        // this.orderTable = resData.data.list
        // this.total = resData.data.total
        // this.currentPage = resData.data.currentPage
        },
        async getOrderTable() {
            var resData = await getOrder(this.orderInfo)
            if (resData.code !== 200) return
            console.log('非回收站订单信息')
            console.log(resData.data.list)
            this.orderTable = resData.data.list
            this.total = resData.data.total
            this.currentPage = resData.data.currentPage
        },
        async getOrderTable1() {
            var resData = await getOrder(this.orderInfo1)
            if (resData.code !== 200) return
            console.log('回收站订单')
            console.log(resData.data.list)
            this.orderTable1 = resData.data.list
            this.total1 = resData.data.total
            this.currentPage1 = resData.data.currentPage
        },
        async getOrderTable3() {
            var resData = await getOrder(this.orderInfo2)
            if (resData.code !== 200) return
            console.log('代付款订单')
            console.log(resData.data)
            this.orderTable2 = resData.data.list
            this.total2 = resData.data.total
            this.currentPage2 = resData.data.currentPage
        },
        async getOrderTable2() {
            let qqq = {}
            var rs = await getOrder(qqq)
            if (rs.code !== 200) return
            console.log('全部订单')
            console.log(rs.data)
            this.getSuzuPriceSuzu2 = rs.data.list
        },
        async addOrder() {
            console.log(this.orderForm)
            var resData = await submitOrder(this.orderForm)
            if (resData.code !== 200) return
            else {
                this.orderForm.student_id = ''
                this.$message.success('创建订单成功')
                console.log(resData)
            }
        },
        async getShoufeiKecheng() {
            let qqq = {}
            var resData = await getShoufeiCourse(qqq)
            if (resData.code !== 200) return
            else {
                console.log('收费课程')
                console.log(resData.data.list)
                this.shoufeiCourse = resData.data.list
            }
        },
        clearForm163() {
            this.seachCOurseFOrmDIa.lession_id = ''
            this.seachCOurseFOrmDIa.semester_id = ''
            this.getShoufeiKecheng()
        },
        async getShoufeiKecheng2() {
            var resData = await getShoufeiCourse(this.seachCOurseFOrmDIa)
            if (resData.code !== 200) return
            else {
                console.log('查询收费课程')
                console.log(resData.data.list)
                this.shoufeiCourse = resData.data.list
            }
        },
        async getStuIofo(n) {
            if (n !== 2) {
                this.stuSearInfo.student_name = ''
            }
            var resData = await getStu(this.stuSearInfo)
            if (resData.code !== 200) return
            else {
                console.log('学员信息')
                console.log(resData)
                this.stuShuzu = resData.data.list
                this.totalStu = resData.data.total
                this.currentPagestu = resData.data.currentPage
            }
        },
        asdasd() {
            console.log(this.orderForm)
        },

        clicktoStu() {
            if (this.orderForm.pay_item.length === 0) {
                return this.$message.error('请选择购买项目')
            }

            // this.setSTHIntoForm()
            this.dialogVisible = false
            this.selectStuDialogVisible = true
        },
        onSubmit() {
            console.log('submit!')
        }
    }
}
</script>

<style scoped lang='scss'>
.el-table--mini {
  font-size: 14px;
}
.courseInfoShow {
  h2 {
    border-top: 1px solid gray;
    text-align: center;
  }
  margin: 100px 0 50px 200px;
  padding-bottom: 100px;
  .courseInfoDiv1 {
    float: left;
    div {
      padding-top: 15px;
    }
  }
  .courseInfoTime {
    padding-top: 15px;
    padding-left: 30%;
    float: left;
  }
}

.dingdanH1 {
  padding-left: 40%;
}

.dingDanInfo {
  h2 {
    border-top: 1px solid gray;
    text-align: center;
  }
  border-top: 1px solid gray;
  margin-bottom: 50px;
  padding-bottom: 30px;
  padding-bottom: 1px solid gray;
  .divDingdan2 {
    padding-top: 15px;
    padding-left: 30%;
    float: left;
  }

  .divDingdan1 {
    padding-left: 200px;
    div {
      padding-top: 15px;
    }
    float: left;
  }
}

.StuSearch {
  margin: 15px 20px;
}
.shangpingouwuche {
  .shangpingouwucheqqq {
      height: 200px;
    margin: 20px 0 0 20px;
  }
  .shangpingouwucheDIv1a {
    display: flex;
    justify-content: flex-end;

    margin-top: 20px;
    margin-right: 60px;
    // margin-bottom: 12px;
    // align-items: center;
  }
  .shangpingouwucheDIv1 {
    display: flex;
    justify-content: space-between;

    margin: 20px 20px 0 20px;
    display: flex;
  }
  margin-top: 10px;
  border-radius: 8px;
  border: 1px solid #dcdfe6;
}
.xueyuanliebiaoBtn {
  margin: 20px 0 0 20px;
}
.itemInfo {
  position: relative;
  height: 200px;
  margin: 20px auto;
  border: 0.5px solid;
  border-radius: 8px;
  font-size: 16px;
  .msShow {
    margin-left: 18px;
    margin-top: 30px;

    span {
      margin-left: 12px;
    }
  }
  .svgDiv {
    top: 119px;
    left: 1019px;
    position: absolute;
    width: 70px;
    height: 70px;

    .svgDIv {
      position: relative;
      left: 6px;
      top: -6px;
    }
    div {
      span {
        font-family: fantasy;
        position: relative;
        top: 10px;
        left: 27px;
      }
    }
  }
}

.shouFeiTable {
  margin-top: 13px;
  // border: 1px solid gray;
  .el-table {
    padding-top: 10px;
  }
}
.moneyShow {
  // justify-content: space-around;
  display: flex;
  margin: 20px 20px 20px 0;
  .masdasd{
    margin-left: 0  !important;
  }
  .moneyShowDIv1 {
        margin-left: 30px;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
    display: flex;
    .moneyShowDIv1INY {
      justify-content: space-between;
      align-items: center;
      .dingdanzongeasda {
        margin-top: 6px !important;
        margin-left: 12px !important;
        margin-right: 20px;
      }
      .dingdanzongeasdaa {
        margin: 10px;
      }
      display: flex;

      padding: 12px;
    }
  }
}
.xjsfBtn {
  margin: 20px 20px 12px 2px;
}
.xinjianshoufei {
  margin-left: 100px;
}

.app-container {
  overflow: auto;
}

.prcieMingXi {
  h2 {
    border-top: 1px solid gray;
    text-align: center;
  }
  margin: 100px 0 50px 200px;
  padding-bottom: 100px;
}
.dingdan13213 {
  background-color: gray;
  div {
    float: left;
  }
}
.lookOrderDiaLogDiv {
  display: flex;
  flex-direction: column;
  .lookOrderDiaLogDiv1123 {
    border: 1px solid #3b3b3b;
  }
  .lookOrderDiaLogDiv2 {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    .column {
      margin: 20px 500px 20px 20px;
      flex-basis: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
  .lookOrderDiaLogDiv1 {
    font-size: 16px;
    background-color: #e8e8e8;
    border-bottom: 1px solid #3b3b3b;
    display: flex;
    justify-content: space-between;
    div {
      margin: 20px;
    }
  }
}
.goodsInfoTableData11778 {
  border-top: 1px solid rgb(32, 31, 31);
}
.goodsInfo1234H2 {
  font-size: 1.5em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
.dingdanheduiDiv222 {
  margin: 20px 120px 20px 120px;
  div {
    margin-top: 10px;
  }
}
.dingdanheduiDiv {
  .dingdanheduiDiv1fuqin123 {
    .shangkejiaoshi {
      margin-left: 40%;
    }
    display: flex;
  }

  .dingdanheduiDiv1fuqin {
    border-bottom: 1px solid #3b3b3b;
  }
  margin-top: 60px;
  .dingdanheduiDivh1 {
    h1 {
      text-align: center;
    }
  }
  .dingdanheduiDiv1 {
    div {
      margin-top: 20px;
    }
    margin: 50px 120px 20px 120px;
  }

  .dingdanheduiDiv1a {
    display: flex;
    justify-content: space-between;
  }
}
.dingdanheduiDiv222111 {
  display: flex;
  justify-content: flex-end;
  margin-right: 20%;
}
.bottomPaginationaa {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.shoufeiDialogForm {
  margin-top: 20px;
}
.iconfont {
  font-size: 60px;
}
.xuanzexianshi {
  margin: 0 12px 0 0px;
  display: flex;
  div {
    margin-left: 30px;
  }
}
.selectDIV3 {
  display: flex;
  flex-direction: column;
  div {
    margin-top: 8px;
  }
}
.icon {
  font-size: 60px;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.dingdanxinxiDIV {
  width: 200px;
  margin-top: 12px;
}
.dingdanxinxiDIVasd {
  margin-left: 50px;
}
.el-form-item {
  margin-bottom: 0px;
}
.elFormDIV1 {
  margin: 12px 20px 0 20px;
  border-bottom: 1px solid black;
  .elFormDIV2 {
    display: flex;
    padding: 20px 50px 20px 50px;
    .elFormDIv4 {
      margin-left: 200px;
    }
    .elFormDIv3 {
      margin-left: 45px;
    }
  }
}
.elFormDIV6 {
  margin: 12px 20px 0 20px;
  .elFormDIV2 {
    display: flex;
    padding: 20px 50px 20px 50px;
    .elFormDIv4 {
      margin-left: 200px;
    }
    .elFormDIv3 {
      margin-left: 45px;
    }
  }
}
.tableOrder {
  margin-top: 30px;
  margin-left: 20px;
}
.addStuDIV {
     margin: 23px 2px 0 22px;
}
.icon {
  font-size: 50px;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.divTitle {
  margin: 32px 0 12px 0;
}
.formStu {
  margin: 12px 0 0 10px;
.formItem{
  margin-left: 20px;
}
}
.selectClass{
  width: 178px;
}
.cardTags{
  margin-top: 20px;
}
.orderSearch{

}
</style>
